<!--
 * @Author: Lu junwen
 * @Date: 2022-05-19 02:14:38
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-05-19 02:55:43
 * @FilePath: \vue-shop-app-customer\src\views\Goods\SearchResult.vue
-->
<template>
  <div class="app">
    <div class="header">
      <van-nav-bar title="搜索结果" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="search">
      <van-search
        v-model="queryInfo.query"
        shape="round"
        show-action
        placeholder="请输入商品名称关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="list">
      <Card v-for="good in goodsList" :key="good.goods_id" :good="good" />
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Card from '@/components/goodsCard.vue'
export default {
  components: { Card },
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10000
      },
    }
  },
  mounted() {
    // if (this.$route.query.goods) {
    //   this.goodsList = this.$route.query.goods
    // }
  },
  computed: {
    ...mapState('search', ['goodsList']),
  },
  methods: {
    ...mapActions('search', ['resetGoodsList']),
    onSearch() {
      this.axios.get('goods', { params: this.queryInfo }).then(res => {
        console.log('goods', res.data.data.goods);
        this.resetGoodsList(res.data.data.goods)
      })
    },
    //返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  }
}
</script>

<style lang="scss" scoped>
.app {
  .list{
    margin-bottom: 50px;
  }
}
</style>